<!DOCTYPE html>
<!--
  HTML bootstrap.
  Author: ccalo@google.com (Chris Calo)
  -->
<html lang="en" ng-app="appname">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
    <link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
    <title>Pendar Yousefi: AdWords Ad Templates</title>
    <meta name="description" content="Pendar Yousefi's work on Project Compass" />
    <meta name="author" content="pendar@google.com (Pendar Yousefi)" />
    <link rel="stylesheet" href="/css/style.css"/>
    <script src="/lib/jquery/jquery-2.0.3.js"></script>
    <script src="/lib/angular/angular-1.0.8.min.js"></script>
    <script src="/lib/js-yaml/js-yaml.js"></script>
    <script src="/lib/markdown/markdown.js"></script>
    <script src="/app/main.js"></script>
    <script src="/js/WallopSlider.js"></script>
  </head>
  <body class="ad-templates">
    <header id="header">
      <nav>
        <a class="logo" href="/">
          Pendar Yousefi
        </a>
        
        <ul class="social">
          <li><a class="twitter" href="http://www.twitter.com/legofish" target="_blank"><span class="symbol">&#xe086;</span></a></li>
          <li><a class="dribbble" href="http://www.dribbble.com/legofish" target="_blank"><span class="symbol">&#xe021;</span></a></li>
          <li><a class="linkedin" href="https://www.linkedin.com/pub/pendar-yousefi/b/315/46a" target="_blank"><span class="symbol">&#xe052;</span></a></li>
        </ul>
      </nav>
    </header>
    <section id="content">
      <section id="project-details" class="ad-templates">
        <header>
          <h6>Display Ad Builder</h6>
          <h2>What if AdWords display templates were better designed?</h2>
          <br/>

          <div class="credits cf">
            <ul class="team">
              <li><strong>UX Lead:</strong> Pendar Yousefi</li>
              <li><strong>PM:</strong> Ashley Jiang & Ying He</li>
              <li><strong>TL:</strong> Daly Chang & Igor Almeida</li>
            </ul>
            <div class="meta">
              <span class="size l"><strong>  Size:</strong> L <em class="bars"><i></i><i></i><i></i><i></i></em></span>
              <span class="impact xl"><strong> Impact:</strong> Critical <em class="bars"><i></i><i></i><i></i><i></i></em></span>
            </div>
          </div>
          <div class="links">

            <a href="https://mobile-ads.googleplex.com" target="_blank"><img src="/img/icon_design.svg"> Mobile Designs </a>
            <a href="https://folio.googleplex.com/awux/adwords/creatives/display/dab-templates/new-templates/latest#%2F1.html" target="_blank"><img src="/img/icon_design.svg"> Responsive Templates </a>
             <a href="https://docs.google.com/a/google.com/document/d/14agLgue_QRapJ44gINlr3yPFtZjxuLA8OOrYFPqKF3E/edit#heading=h.k22w9sye19i" target="_blank"><img src="/img/icon_doc.svg"> PRD: HTML5 ads</a>
            <a href="https://docs.google.com/a/google.com/document/d/1zanG_XSwFefO2RBYBXOMu78DyZGCy82FMM9SGo-qjsA/edit" target="_blank"><img src="/img/icon_doc.svg"> PRD: Responsive ads</a>
          </div>
        </header>
        <article class="value">
          <hgroup>
          <span class="underlay">12</span>
            <h6>Motivation</h6>
            <p class="lead"> AdWords allows advertisers to automatically create display banner ads based on the look and feel of their website. The 12 templates used for these 'Ad ideas' were designed years ago in Flash and looked dated. More importantly, they did not include mobile  sizes, resulting in a big missed opportunity to monetize on mobile.
          </hgroup>
        </article>
        <article class="value">
          <h6>my role</h6>
          <h2> Bringing change</h2>
          <p class="colz-2"> I actively sought ought ownership of these rather neglected 'ad idea' templates, first adding mobile sizes to the top 12 templates, and then designing 4 brand new templates with modern aesthetics. All new designs were done in html5 (migrating from the old Flash platform). From launching in November 2013 to September 2014, 85,743 AdWords users had created more than 351,910 mobile ads using my designs, resulting in an additional revenue of <a class="simple" target="_blank" href="https://docs.google.com/a/google.com/spreadsheets/d/1ZUAPdI6ALo_M_bNlRJojkky6WU_CZnOVt3rgjSJ-HWQ/edit?usp=sharing_eid">$8,363,000</a>. </p>
        </article>
        <article class="process right cf">
          <hgroup>
           <h6>Mobile ads</h6>
          <h3> Fitting them all</h3>
          <p> My first challenge was fitting all the ad elements in the small 320 x 50px mobile ad size and match the look and feel of the pre-existing templates. 
          To do that, I came up with the idea of using inter-fading animations to show different elements at different times. To see all 12 designs, <a href="http://mobile-ads.googleplex.com" target="_blank" class="simple">View project website</a></p>
          <iframe src="/img/ads/modular-design-1/index.html" style="margin-top:20px; width:320px; height:50px; overflow:hidden;"></iframe>
          </hgroup>
          
        </article>
        <article class="process left cf" style="padding-bottom:200px;">
          <hgroup>
          <h6>Out with the old</h6>
          <h3> In with the new</h3>
          <p> Next, I decided to design 4 fresh new template families to elevate the designs of our ad ideas.
          </p>
          </hgroup>

          <div class="wallop-slider wallop-slider--fade">
            <ul class="wallop-slider__list">
              <li class="wallop-slider__item wallop-slider__item--current">
                <div class="img-wrapper">
                  <img src="/img/ads/1.png">
                </div>
                <p> <strong>Design 1</strong>: <a class="simple" href="https://folio.googleplex.com/awux/adwords/creatives/display/dab-templates/new-templates/latest#%2F1.html" target="_blank">See live html version</a> for animation</p>
              </li>
              <li class="wallop-slider__item">
                 <div class="img-wrapper">
                  <img src="/img/ads/2.png">
                </div>
                <p> <strong>Design 2</strong>: <a class="simple" href="https://folio.googleplex.com/awux/adwords/creatives/display/dab-templates/new-templates/latest#%2F2.html" target="_blank">See live html version</a> for animation</p>
              </li>
              <li class="wallop-slider__item">
                <div class="img-wrapper">
                  <img src="/img/ads/3.png">
                </div>
                <p> <strong>Design 3</strong>: <a class="simple" href="https://folio.googleplex.com/awux/adwords/creatives/display/dab-templates/new-templates/latest#%2F3.html" target="_blank">See live html version</a> for animation</p>
              </li>
              <li class="wallop-slider__item">
                <div class="img-wrapper">
                  <img src="/img/ads/4.png">
                </div>
                 <p> <strong>Design 4</strong>: <a class="simple" href="https://folio.googleplex.com/awux/adwords/creatives/display/dab-templates/new-templates/latest#%2F4.html" target="_blank">See live html version</a> for animation</p>
              </li>
            </ul>
            <button href="javascript:;" class="btn_prev wallop-slider__btn wallop-slider__btn--previous" disabled="disabled">‹</button>
            <button href="javascript:;"  class="btn_next wallop-slider__btn wallop-slider__btn--next">›</button>
          </div>

        </article>
     
       
        <article class="process middle">
          <hgroup>
          <h6>The next generation</h6>
          <h3> Responsive Ads</h3>
          <p> Responsive ads are the next generation of AdWords tempaltes. Removing the notion of fixed ad sizes, they are singular ad units that adapt their design to any size. I worked directly with our engineering team in Shanghai to ensure the highest design quality for repsonsive ads, helping them convert my  Ad Idea templates into responsive ads.
          </p>
          </hgroup>
          <a class="btn" href="https://folio.googleplex.com/awux/adwords/creatives/display/dab-templates/new-templates/latest#%2F1.html" target="_blank" style="margin-top:50px;">
            See ad prototypes
          </a>
        </article>

      </section>
    </section>
   <div class="wrapper">
   </div>
  </body>
  
  <script>
  $(document).ready(function(){

   
    var slider = new WallopSlider('.wallop-slider');

    var months = monthDiff(
        new Date(2013, 07, 29), // November 4th, 2008
        new Date()  // March 12th, 2010
    );
    console.log( months);
  });

  function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}
  </script>
</html>
